<template>
  <view class="page container">
    <z-paging :refresher-enabled="false" :auto-full-height="false" :default-page-size="15" ref="pagingRef"
      v-model="dataList" @query="queryList" :paging-style="{ 'background-color': 'transparent' }"
      :show-loading-more-no-more-view="false">
      <view slot="top" class="pl-32 pr-32 pt-28 bgc-fff" :class="{ 'pb-28': activeTab === 0 }"
        style="position: relative;z-index: 99990;">
        <view class="tab-bar bgc-fff">
          <view class="tab-bar-item" :class="{ active: activeTab === 0 }" @click="activeTab = 0">
            联盟简介
          </view>
          <view class="tab-bar-item" :class="{ active: activeTab === 1 }" @click="activeTab = 1">
            联盟成员
          </view>
        </view>

      </view>
      <view class="filter-wrapper" v-if="activeTab === 1">
        <VintnersUnionScreen @overlay_show="overlayShow" ref="screenRef" @onSearch="onScreen" @onReast="onReast">
        </VintnersUnionScreen>
      </view>
      <u-overlay :show="overlay_show" @click="clickOverlay" :zIndex="2"></u-overlay>
      <view class="h-28 bgc-f7f8fa" v-if="activeTab === 1"></view>
      <view class="rich-text pad-28" v-if="activeTab === 0">
        <u-parse :content="content"></u-parse>
      </view>
      <view class="user-list pb-50" v-if="activeTab === 1">
        <view class="user-item flex-column-center pad-28" v-for="item in dataList" :key="item.id">
          <u-image width="192rpx" height="212rpx" radius="12rpx" :src="item.avatar"></u-image>
          <view class="ml-24 h-212 flex-column flex-row-between" style="flex: 1">
            <view class="flex-between-center">
              <text class="fs-32 fw-500 text-ellipsis" style="width: 350rpx">{{ item.truename }}</text>
              <view class="w-116 h-56 br-8 c-c5261d fs-24 fw-500 flex-center-center btn-active"
                style="border: 1px solid #c5261d" @click="callTa(item)">联系TA</view>
            </view>
            <view>
              <view class="fs-28"><text class="c-677585 mr-20">职　　位:</text>
                <text>{{ item.rank_name || '--' }}</text>
              </view>
              <view class="mt-12 fs-28"><text class="c-677585 mr-20">负责区域:</text>
                <text>{{ item.region_name || '--' }}</text>
              </view>
              <view class="mt-12 fs-28"><text class="c-677585 mr-20">联系方式:</text>
                <text>{{ item.phone || '--' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-action-sheet cancelText="取消" :actions="actionList" :show="actionShow" @close="closeActionSheet"
        @select="selectAction"></u-action-sheet>
    </z-paging>
  </view>
</template>
<script>
import { richTxtApi } from "@/services/common";
import { communityUserListApi } from "@/services/home";
import VintnersUnionScreen from "../components/VintnersUnionScreen.vue"
export default {
  data() {
    return {
      actionShow: false,
      actionList: [
        {
          name: "联系TA",
          color: "#1C1714",
          fontSize: "34rpx",
        },
        {
          name: "",
          color: "#1C1714",
          fontSize: "34rpx",
        },
        {
          name: "拨号",
          color: "#1C1714",
          fontSize: "34rpx",
        },
      ],
      actionsConfig: {
        show: false,
        actions: [],
      },
      content: "",
      activeTab: 0,
      dataList: [],
      overlay_show: false,
      selectedValues: {

      },
    };
  },
  onLoad() {
    this.getRichTxt();
  },
  components: { VintnersUnionScreen },
  methods: {
    clickOverlay() {
      this.$refs.screenRef.overlay_show = false;
    },
    overlayShow(e) {
      this.overlay_show = e;
    },
    getRichTxt() {
      richTxtApi({ id: 2 }).then((res) => {
        this.content = res.data?.rich_info.content || "";
      });
    },
    callTa(item) {
      this.$set(this.actionList[1], 'name', item.phone || '');
      this.actionShow = true;
    },
    closeActionSheet() {
      this.actionShow = false;
    },
    selectAction(item) {
      if (item.name === '拨号') {
        this.$utils.onCall(this.actionList[1].name);
      }
    },
    queryList(page, size) {
      const requestObj = {
        page,
        page_size: size,
        ...this.selectedValues,
      };
      communityUserListApi(requestObj).then((res) => {
        this.$refs.pagingRef?.complete(res.data?.data || []);
      });
    },
    onScreen(e) {
      const { area } = e;
      const [city, district, town, village] = area;
      this.selectedValues = this.$options.data.selectedValues; //先还原
      const requestObj = {
        city: this.filterAll(city),
        district: this.filterAll(district),
        town: this.filterAll(town),
        village: this.filterAll(village),
      };
      this.selectedValues = requestObj;
      this.$refs.pagingRef?.reload();
    },
    onReast() {
      this.selectedValues = this.$options.data.selectedValues;
      this.$refs.pagingRef?.reload();
    },
    filterAll(e) {
      if (["all4", "all3", "all2", "all1"].includes(e)) {
        return "";
      }
      return e;
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 16rpx 32rpx;

  .filter-wrapper {
    background-color: #fff;
    position: relative;
    z-index: 100;
  }

  .tab-bar {
    width: 100%;
    height: 68rpx;
    background-color: #f7f8fa;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;

    .tab-bar-item {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 68rpx;
      font-size: 28rpx;
      font-weight: 500;
      border-radius: 12rpx;

      &.active {
        color: #fff;
        background-color: $theme-color;
      }
    }
  }

  .user-list {
    .user-item {}
  }
}
</style>
